<template>
  <div class="home">
    <h2>欢迎使用租房后台管理系统</h2>
    <p>这里是您管理所有房源和租客信息的地方。<br/>
      如果您是新注册的用户请先联系管理员给您添加权限。
    </p>

    <hr />

    <h4>系统版本</h4>
    <blockquote>当前版本：{{ version }}</blockquote>

    <hr />

    <h4>统计数据</h4>
    <div class="summary">
      <div class="col-item">
        <h3>总房源数</h3>
        <p>{{ totalHouses }}</p>
      </div>
      <div class="col-item">
        <h3>当前租客数</h3>
        <p>{{ totalTenants }}</p>
      </div>
    </div>

    <hr />

    <h4>最新更新日志</h4>
    <div class="update-log">
      <ol>
        <li>修复了房源列表中的排序问题</li>
        <li>优化了租客信息的加载速度</li>
        <li>新增了房源详情页面的图片上传功能</li>
      </ol>
    </div>
  </div>
</template>


<script setup name="Index">
import { ref } from 'vue';

const version = ref('3.8.7');

const totalHouses = ref(120);
const totalTenants = ref(80);

function goTarget(url) {
  window.open(url, '__blank');
}
</script>

<style scoped lang="scss">
.home {
  max-width: 2600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  h2 {
    text-align: center;
    color: #333;
    font-size: 28px;
    margin-bottom: 20px;
  }

  p {
    font-size: 16px;
    line-height: 1.5;
    color: #676a6c;
    margin-bottom: 20px;
  }

  hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid #eee;
  }

  h4 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    color: #444;
  }

  .summary {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;

    .col-item {
      flex: 1;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin: 10px;
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      h3 {
        font-size: 20px;
        color: #333;
        margin-bottom: 10px;
      }

      p {
        font-size: 18px;
        font-weight: bold;
        color: #555;
      }
    }
  }

  .update-log {
    margin-top: 20px;

    ol {
      list-style-type: decimal;
      padding-left: 20px;
      margin-bottom: 20px;

      li {
        font-size: 16px;
        line-height: 1.5;
        color: #676a6c;
        margin-bottom: 10px;
      }
    }
  }
}
</style>

